<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>用户管理</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="/assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="/assets/css/ace-rtl.min.css"/>

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="/assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="/assets/js/html5shiv.min.js"></script>
    <script src="/assets/js/respond.min.js"></script>
    <![endif]-->

    <!--[if !IE]> -->
    <script src="/assets/js/jquery-2.1.4.min.js"></script>

    <!-- <![endif]-->

    <!--[if IE]>
    <script src="/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script src="/assets/js/bootstrap.min.js"></script>

    <!-- page specific plugin scripts -->
    <script src="/assets/js/jquery.dataTables.min.js"></script>
    <script src="/assets/js/jquery.dataTables.bootstrap.min.js"></script>
    <script src="/assets/js/dataTables.buttons.min.js"></script>
    <script src="/assets/js/buttons.flash.min.js"></script>
    <script src="/assets/js/buttons.html5.min.js"></script>
    <script src="/assets/js/buttons.print.min.js"></script>
    <script src="/assets/js/buttons.colVis.min.js"></script>
    <script src="/assets/js/dataTables.select.min.js"></script>

    <!-- ace scripts -->
    <script src="/assets/js/ace-elements.min.js"></script>
    <script src="/assets/js/ace.min.js"></script>

    <!-- TODO 页面删除js -->

</head>

<body class="no-skin">

<div th:replace="header :: navbar"></div>

<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }

        $(function () {
            $('#checkAll').change(function () {
                var alls = document.getElementsByName("check");
                if (this.checked) {
                    for (var i = 0; i < alls.length; i++) {
                        alls[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < alls.length; i++) {
                        alls[i].checked = false;
                    }
                }
            });
        });
    </script>

    <div th:replace="left :: sidebar"></div>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">用户</a>
                    </li>
                    <li class="active">用户管理</li>
                </ul>

            </div>

            <div class="page-content">

                <div style="float: left; padding: 10px;">
                    <form class="form-inline" id="qf" action="/user/list" method="post">
                        <input type="hidden" name="pageNum" id="pageNum">
                        <input type="hidden" name="pageSize" id="pageSize">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" name="name" class="form-control" id="name" th:value="${param.name}">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="text" name="email" class="form-control" id="email" th:value="${param.email}">
                        </div>
                        <button type="submit" class="btn btn-sm btn-default">查询</button>
                        <button type="button" class="btn btn-sm btn-default"
                                onclick="location.href='/user/toAdd'">添加
                        </button>
                    </form>
                </div>
                <table id="simple-table" class="table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${page.list}">
                        <th><input type="checkbox" name="check"></th>
                        <td th:text="${user.id}">编号</td>
                        <td th:text="${user.name}">姓名</td>
                        <td th:text="${user.sex}">性别</td>
                        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd')}">出生日期</td>
                        <td th:text="${user.telephone}">电话</td>
                        <td th:text="${user.email}">邮箱</td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <a class="btn btn-xs btn-info"
                                   th:href="|/user/toUpdate/${user.id}|">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>
                                </a>
                                <a class="btn btn-xs btn-info"
                                   th:href="|/user/delete/${user.id}|">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                </a>
                            </div>
                        </td>

                    </tr>
                    </tbody>
                </table>
                <div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li id="first">
                                <a href="javascript:void(0);">
                                    <span aria-hidden="true">首页</span>
                                </a>
                            </li>
                            <li id="prev">
                                <a href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>

                            <li name="pageNum" th:each="i : ${page.navigatepageNums}"
                                th:class="${i == page.pageNum} ? 'active'">
                                <a href="javascript:void(0);" th:text="${i}"></a>
                            </li>

                            <li id="next">
                                <a href="javascript:void(0);" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>

                            <li id="last">
                                <a href="javascript:void(0);">
                                    <span aria-hidden="true">末页</span>
                                </a>
                            </li>

                            <span style="font-size: 20px;margin-left: 5px;"
                                  th:text="|共${page.total}条记录,共${page.pages}页, 每页${page.pageSize}行|">
                                            </span>
                            <select id="setRows">
                                <option value="5" th:selected="${5 == page.pageSize}">5</option>
                                <option value="10" th:selected="${10 == page.pageSize}">10</option>
                                <option value="20" th:selected="${20 == page.pageSize}">20</option>
                                <option value="30" th:selected="${30 == page.pageSize}">30</option>
                            </select>

                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        var pageNum = [[${page.pageNum}]]; //当前页
        var pages =[[${page.pages}]]; //总页数
        var hasNextPage = [[${page.hasNextPage}]];//true：还有下一页
        var hasPreviousPage =[[${page.hasPreviousPage}]]; //还有上一页

        //判断按钮状态
        if (!hasPreviousPage) {
            $("#prev").addClass("disabled");
            $("#first").addClass("disabled");
        }
        if (!hasNextPage) {
            $("#next").addClass("disabled");
            $("#last").addClass("disabled");
        }

        $("#first").click(function() {
            if (!$("#first").hasClass("disabled")) {
                $("#pageNum").val(1);
                $("#qf").submit();
            }
        });
        $("#prev").click(function() {
            if (!$("#prev").hasClass("disabled")) {
                $("#pageNum").val(pageNum - 1);
                $("#qf").submit();
            }
        });
        $("#next").click(function() {
            if (!$("#next").hasClass("disabled")) {
                $("#pageNum").val(pageNum + 1);
                $("#qf").submit();
            }
        });
        $("#last").click(function() {
            if (!$("#last").hasClass("disabled")) {
                $("#pageNum").val(pages);
                $("#qf").submit();
            }
        });

        $("li[name='pageNum']").click(function(){
            if (!$(this).hasClass("active")) {
                $("#pageNum").val($(this).children("a").html());
                $("#qf").submit();
            }
        });

        $("#setRows").change(function(){
            $("#pageSize").val($(this).val());
            $("#pageNum").val(1);
            $("#qf").submit();
        });

    });
</script>
</html>
